import React from "react"
import "./index.css"
import type { TodoItem } from "../../index"
import CopTodoItem from "../todo-item"

interface TodoListProps {
  todoList: Array<TodoItem>
  removeTodoEvent: (index: number) => void
  todoCheckChangeEvent: (index: number) => void
}

const TodoList: React.FC<TodoListProps> = ({ todoList, removeTodoEvent, todoCheckChangeEvent }) => {
  return (
    <div className="list">
      {todoList.map((todoItem, index: number) => {
        return (
          <CopTodoItem
            item={todoItem}
            index={index}
            key={index}
            removeTodoEvent={removeTodoEvent}
            todoCheckChangeEvent={todoCheckChangeEvent}
          ></CopTodoItem>
        )
      })}
    </div>
  )
}

export default TodoList
